<template>
    <div>
        <el-card class="!border-none p-4" shadow="never">
            <el-page-header content="园参种植主体信息详情" @back="$router.back()" class="text-lg font-medium text-gray-800 mb-[16px]" />
            <el-form ref="formRef" class="mb-[-16px] gap-4 flex flex-wrap" :model="queryParams" :inline="true">
<!--                <el-form-item v-if="grade !== 3" class="w-[280px]" label="所属区域">
                    <area-picker v-model="areas"></area-picker>
                </el-form-item>-->
                <el-form-item class="w-[280px]" label="主体名称">
                    <el-input v-model="queryParams.entity_name" placeholder="请输入主体名称" clearable
                              @keyup.enter="resetPage" />
                </el-form-item>
                <el-form-item class="w-[280px]" label="种植地点">
                    <el-input v-model="queryParams.address" placeholder="请输入种植地点" clearable
                              @keyup.enter="resetPage" />
                </el-form-item>
                <el-form-item label="提交时间">
                    <daterange-picker v-model:startTime="queryParams.start_time"
                                      v-model:endTime="queryParams.end_time" />
                </el-form-item>
                <!-- <el-form-item class="w-[280px]" label="注册来源">
                    <el-select v-model="queryParams.channel">
                        <el-option v-for="(item, key) in ClientMap" :key="key" :label="item" :value="key" />
                    </el-select>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="toSearch">查询</el-button>
                    <el-button @click="resetData">重置</el-button>
                    <export-data class="ml-4" :fetch-fun="getPlantingList" :params="{...queryParams, user_id: route.query.id}"
                                 :page-size="pager.size" />
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4 p-4" shadow="never">
            <div class="mb-4 text-center text-2xl font-bold">种植面积合计: {{ areasNum }} 亩</div>
            <el-table size="large" v-loading="pager.loading" :data="pager.lists"
                      style="--el-table-border-color: rgba(180, 185, 195, 2)">
                <el-table-column label="主体名称" prop="entity_name" min-width="80" align="center">
                    <template #default="{ row }">
                        {{ row.entity_name || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="地址" prop="comp_address" min-width="100" align="center">
                    <template #default="{ row }">
                        {{ row.comp_address || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="种植地点" prop="address" min-width="50" align="center">
                    <template #default="{ row }">
                        {{ row.address || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="种植品种" prop="variety" min-width="50" align="center">
                    <template #default="{ row }">
                        {{ row.variety || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="种植面积" prop="planting_area" min-width="50" align="center">
                    <template #default="{ row }">
                        {{ row.planting_area || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="提交时间" prop="create_time" min-width="50" align="center">
                    <template #default="{ row }">
                        {{ row.create_time || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="采收面积(亩)" prop="actual_production_area" min-width="50" align="center">
                    <template #default="{ row }">
                        {{ row.actual_production_area || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="采收量(公斤)" prop="actual_production_volume" min-width="50" align="center">
                    <template #default="{ row }">
                        {{ row.actual_production_volume || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button v-perms="['plant.plant/detail']" type="primary" link>
                            <router-link :to="{
                                    path: getRoutePath('plant.plant/detail'),
                                    query: {
                                        id: row.id
                                    }
                                }">
                                详情
                            </router-link>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog v-model="dialogVisible" :title="'图片查看'" width="50%">
                <el-carousel v-if="imageList.length" v-model="currentImageIndex" arrow="always">
                    <el-carousel-item v-for="(image, index) in imageList" :key="index">
                        <el-image :src="image" fit="contain" style="width: 100%; height: 200px" />
                    </el-carousel-item>
                </el-carousel>
            </el-dialog>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="consumerLists">
import config from '@/config'
import { ref, reactive, onActivated } from 'vue'
import { getPlantingArea, getPlantingList } from '@/api/Planting'
import { ClientMap } from '@/enums/appEnums'
import { usePaging } from '@/hooks/usePaging'
import router, { getRoutePath } from '@/router'
const route = useRoute()
const formRef = ref(null)
const queryParams = reactive({
    address: '',
    entity_name: '',
    channel: '',
    start_time: '',
    end_time: '',
    province_id: '',
    city_id: '',
    area_id: ''
})
const areas = ref()

import useUserStore from '@/stores/modules/user.ts'
const userState = useUserStore()
const grade = computed(()=> {
    return userState.userInfo.grade
})
watch(areas, (val)=> {
    queryParams.province_id = val[0] || ''
    queryParams.city_id = val[1] || ''
    queryParams.area_id = val[2] || ''
})
const resetData = ()=> {
    areas.value = []
    resetParams()
    getTotals()
}

const toSearch = ()=> {
    resetPage()
    getTotals()
}

const areasNum = ref(0)
const getTotals = ()=> {
    getPlantingArea({...queryParams, user_id: route.query.id}).then(res=> {
        areasNum.value = res.areas
    })
}

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: getPlantingList,
    params: queryParams,
    fixedParams: {
        user_id: route.query.id,
    }
})

// 组件激活时获取列表数据
/*onActivated(() => {
    getLists()
})*/
// getLists()
// // 组件挂载时获取列表数据
onMounted(() => {
    getLists()
    getTotals()
})

// 弹窗是否显示
const dialogVisible = ref(false)
// 当前图片列表
const imageList = ref<string[]>([])
// 当前图片索引
const currentImageIndex = ref(0)

// 打开图片浏览工具
const openImageGallery = (images: string[], index: number) => {
    imageList.value = images.map(img => config.baseUrl + img)
    currentImageIndex.value = index
    dialogVisible.value = true
}

</script>
<style scoped lang="scss">
.el-form-item__label {
    font-weight: 500;
}

.el-card {
    padding: 16px;
}

.el-form {
    gap: 16px;
    display: flex;
    flex-wrap: wrap;
}

.export-data {
    margin-left: 16px;
}
</style>
